<style>
    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;
        background: white;
        overflow: hidden;
        box-sizing: border-box;
    }

    ::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;

    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

    #container .top {
        padding: 20px;
        box-sizing: border-box;
    }

    .top .video {
        height: 180px;
        width: 260px;
        float: left;
        position: relative;
    }

    .top .tag {
        padding: 20px;
        float: left;
    }

    /*播放按钮*/
    .top .video .btn {
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%)
    }

    .video .icon {
        width: 0;
        height: 0;
        border: 10px solid;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-15%, -50%);
        border-color: transparent transparent transparent white;
    }

    .top .tag .big-title {
        font-size: 16px;
    }

    .top .tag .small-title {
        margin-top: 10px;
        font-size: 12px;
    }

    .top .tag p {
        line-height: 30px;
    }

    .status-gray {
        background: grey;
        font-size: 12px;
        color: black;
        padding: 0 5px;
    }

    .status-select {
        background: #00a2d4;
        font-size: 12px;
        padding: 0 5px;
        color: black;
    }


    #container .bottom {
        clear: left;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 220px;
        bottom: 20px;
        overflow: hidden;
    }

    #container .bottom .content {
        position: absolute;
        right: 18%;
        left: 0;
        top: 0;
        bottom: 0;
        border: 1px solid #E3E3E3;
    }

    #container #info {
        position: absolute;
        right: 0;
        width: 16%;
        top: 0;
        bottom: 0;
        border: 1px solid #E3E3E3;
    }

    .tab a {
        line-height: 40px;
        width: 120px;
        display: inline-block;
        text-align: center;
    }

    a {
        color: black;
    }

    .tab a:hover {
        color: #00a2d4;
    }

    .tab-selected {
        border-bottom: 3px solid #00a2d4;
        color: #00a2d4;
    }

    #container #desc, #container #dict, #container #work {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 20px;
        overflow-y: auto;
    }

    #container #desc {
        text-align: center;
    }

    #info #title {
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #E3E3E3;
    }

    #info #detail {
        box-sizing: border-box;
        padding: 20px;
    }

    #info #portrait {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-right: 20px;
    }

    #info .detail {
        line-height: 30px;
    }

    #list span.title {
        line-height: 35px;
        font-size: 16px;
    }

    #list p.res {
        line-height: 40px;
        font-size: 14px;
        width: 400px;
        margin-left: 30px;
        margin-top: 10px;
        background: #f3f3f3;
        padding: 0 10px;
        cursor: pointer;
        border-radius: 5px;
    }

    #list p.res:hover {
        background: #e3e3e3;
    }

    #work p {
        line-height: 40px;
    }

    #btn-exam {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div id="container" class="fsh-rightPanel">
<!--    <div class="top">-->
<!--        <div class="video">-->
<!--            <img id="cover" src="./res/images/index-header.jpg" style="width: 100%;height: 100%;border-radius: 5px">-->
<!--            <div class="btn" id="btn-play">-->
<!--                <div class="icon"></div>-->
<!--            </div>-->
<!--            <button class="layui-btn layui-btn-normal" id="btn-exam">开始考试</button>-->
<!--        </div>-->
<!--        <div class="tag">-->
<!--            <p class="big-title" id="tag-title">平面设计系列课程-01</p>-->
<!--            <p class="small-title" id="tag-time">开课时间：2019-12-20 10:00</p>-->
<!--            <p class="small-title" id="tag-type">难度：简单</span></p>-->
<!--            <p class="small-title" id="tag-download">文件下载:-->
<!--                <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-left: 20px">下载</button>-->
<!--            </p>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div id="dir" class="bottom">-->
<!--        <div class="content">-->
<!--            <div class="tab" style="position: relative;border-bottom: 1px solid #E3E3E3">-->
<!--                <a class="tab-selected" id="tab1">课程概述</a>-->
<!--                <a id="tab2">课程目录</a>-->
<!--                <a id="tab3">课程作业</a>-->
<!--            </div>-->
<!--            <div id="desc">-->
<!--                <img src="./res/images/detail.jpg" style="width: 100%;height: auto">-->
<!--            </div>-->
<!--            <div id="dict" style="display: none">-->
<!--                <ul id="list">-->
<!--                    <li class="item"><span class="title">01 平面设计基础教程</span>-->
<!--                        <p class="res" onclick="initVideo()"><i class="iconfont icon-bofang"></i>【录播】 01软件下载</p>-->
<!--                    <li class="item"><span class="title">02 平面设计基础教程</span>-->
<!--                        <p class="res" onclick="initLive()"><i class="iconfont icon-bofang"></i>【直播】 02软件下载</p></li>-->
<!--                    <li class="item"><span class="title">03平面设计基础教程</span>-->
<!--                        <p class="res" onclick="initExam()"><i class="iconfont icon-bofang"></i>【考试】 平面设计基础教程</p></li>-->
<!--                    <li class="item"><span class="title">04 平面设计基础教程</span>-->
<!--                        <p class="res" onclick="initExamOnline()"><i class="iconfont icon-bofang"></i>【在线考试】 平面设计基础教程-->
<!--                        </p></li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div id="work">-->
<!--                <p>1、制作一个杯子模型。</p>-->
<!--                <p>2、制作一个杯子模型。</p>-->
<!--                <p>3、制作一个杯子模型。</p>-->
<!--                <p>4、制作一个杯子模型。</p>-->
<!--                <p>5、制作一个杯子模型。</p>-->
<!--                <p>6、制作一个杯子模型。</p>-->
<!--                <p>7、制作一个杯子模型。</p>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div id="info">-->
<!--            <div id="title">师资信息</div>-->
<!--            <div id="detail">-->
<!--                <p class="detail"><img src="./res/images/index-header.jpg" id="portrait" align="left">蓝兰-->
<!--                    7岁开始学习钢琴，13岁考过钢琴十级，18岁跟随四川音乐学院钢琴系主任李晓琳学习。-->
<!--                    中国传媒大学音乐编辑专业毕业-->
<!--                    目前就职于重庆电视台，担任音乐编辑-->
<!--                    从事钢琴教育多年，曾在刘诗昆钢琴学校担任高级老师，对教育教学非常有耐心-->
<!--                    多位学生连续每年参加钢琴考级，获得优异成绩</p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>


<script>
    // var parentId;
    // var type = 1; //1、录播2、直播3、考试4、在线考试
    // layui.use(['layer', 'form'], function () {
    //     var layer = layui.layer;
    //     var form = layui.form;
    //     form.render();
    //     initPage();
    //     // parentId = getHashParam().id;
    //     // loadCourseData();
    //     // loadDirData();
    // });
    //
    // //初始化界面数据
    // function initPage() {
    //     switch (type) {
    //         case 1:
    //             // 录播
    //             initVideo();
    //             break;
    //         case 2:
    //             // 直播
    //             initLive();
    //             break;
    //         case 3:
    //             // 考试
    //             initExam();
    //             break;
    //         case 4:
    //             // 考试
    //             initExamOnline();
    //             break;
    //     }
    // }
    //
    // function initVideo() {
    //     $('#btn-play').show();
    //     $('#btn-exam').hide();
    //
    //     $('#tag-title').html('【录播】平面设计系列课程-01');
    //     $('#tag-time').html('开课时间：2019-12-20 10:00');
    //     $('#tag-type').html('难度：困难');
    //     $('#btn-play').click(function () {
    //         jump('./views/live/template/video');
    //     });
    // }
    //
    // function initLive() {
    //     $('#btn-play').show();
    //     $('#btn-exam').hide();
    //
    //     $('#tag-title').html('【直播】平面设计系列课程-01');
    //     $('#tag-time').html('开课时间：2019-12-20 10:00');
    //     $('#tag-type').html('难度：困难');
    //     $('#btn-play').click(function () {
    //         jump('./views/live/template/live');
    //     });
    // }
    //
    // function initExam() {
    //     $('#btn-play').hide();
    //     $('#btn-exam').hide();
    //
    //     $('#tag-title').html('【考核】造型设计基础考核01');
    //     $('#tag-time').html('考试时间：2019-12-20 10:00&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;考试地点：5楼机房');
    //     $('#tag-type').html('考试类型：实战');
    //     $('#tab3').html('考核要求');
    // }
    //
    // function initExamOnline() {
    //     $('#btn-play').hide();
    //     $('#btn-exam').show();
    //
    //     $('#tag-title').html('【在线考核】造型设计基础考核02');
    //     $('#tag-time').html('考试时间：2019-12-20 10:00&nbsp;考试地点：5楼机房');
    //     $('#tag-type').html('考试类型：在线');
    //     $('#tab3').html('考核要求');
    //
    //     $('#btn-exam').click(function () {
    //         jump('./views/static/paper/template/question_detail');
    //     });
    // }
    //
    // // tab点击事件
    // var descDiv = $('#desc');
    // var dictDiv = $('#dict');
    // var dictWork = $('#work');
    // $(".tab").find('a').click(function () {
    //     checkedTab($(this).prop('id'));
    // });
    //
    // function checkedTab(tab) {
    //     $(".tab").find('a').removeClass('tab-selected');
    //     $(".tab #" + tab).addClass('tab-selected');
    //     switch (tab) {
    //         case 'tab1':
    //             descDiv.show();
    //             dictDiv.hide();
    //             dictWork.hide();
    //             break;
    //         case 'tab2':
    //             descDiv.hide();
    //             dictDiv.show();
    //             dictWork.hide();
    //             break;
    //         case 'tab3':
    //             descDiv.hide();
    //             dictDiv.hide();
    //             dictWork.show();
    //             break;
    //     }
    // }




</script>
